<template>
  <div class="chat-app">
    <el-container>
      <!-- 左侧用户列表 -->
      <el-aside width="250px" class="user-list">
        <el-card class="box-card">
          <template #header>
            <span>用户列表</span>
          </template>
          <ul>
            <li v-for="user in users" :key="user.id" @click="selectUser(user)"
                :class="{ 'selected': selectedUser && selectedUser.id === user.id }">
              {{ user.username }}
            </li>
          </ul>
        </el-card>
      </el-aside>
<!--    聊天室前端代码-->
      <!-- 右侧聊天界面 -->
      <el-main class="chat-interface">
        <el-card class="box-card">
          <template #header>
            <span v-if="selectedUser">{{ selectedUser.username }} 的聊天室</span>
            <span v-else>简易聊天室</span>
          </template>
          <div class="message-area" ref="messageArea">
            <div v-if="messages.length === 0" class="no-messages">暂无聊天记录</div>
            <div v-for="(message, index) in messages" :key="index" class="message" :class="{'mine': message.from === 'me'}">
              <div class="message-header">
<!--                <img :src="message.avatar" alt="Avatar" class="avatar" />-->
                <span class="username">{{ message.username }}</span>
                <span class="message-time">{{ formatTime(message.time) }}</span>
              </div>
              <div class="message-content">
                <p>{{ message.content }}</p>
              </div>
            </div>
          </div>
          <div class="input-area">
            <el-input
                v-model="newMessage"
                placeholder="请输入内容"
                @keyup.enter="sendMessage"
                class="send-message"
            />
            <el-button type="primary" @click="sendMessage">发送</el-button>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElNotification } from 'element-plus';
import axios from 'axios';
import { useUserStore } from "@/store/useUserStore"; // 使用用户状态存储

// 新消息
const newMessage = ref('');
// 消息历史
const messages = ref([]);
// 用户列表（从后端获取）
const users = ref([]); // 初始为空
// 当前选中的用户
const selectedUser = ref(null);
// WebSocket实例
let socket = null;
const userStore = useUserStore();
const userId = ref(userStore.userInfo?.id); // 获取用户 id
const username = ref(userStore.userInfo?.username);
console.log('userId:', userId.value);

/**
 * 初始化 WebSocket
 */
const initWebSocket = () => {
  closeWebSocket(); // 关闭之前的 WebSocket 连接

  if (selectedUser.value) {
    const wsUri = `ws://localhost:8000/websocket/${selectedUser.value.id}`;
    socket = new WebSocket(wsUri);

    // 和服务端建立连接
    socket.onopen = () => console.log('WebSocket 建立连接');

    // 监听服务端消息，接收服务端消息
    socket.onmessage = (event) => {
      const receivedMsg = JSON.parse(event.data);
      // 将消息push到消息列表
      messages.value.push(receivedMsg);
      scrollToBottom();
    };

    // 监听连接过程中发生的错误，如：无法连接
    socket.onerror = (error) => {
      console.error('WebSocket 异常:', error);
      ElNotification({
        title: '错误',
        message: 'WebSocket 连接失败，请检查服务器状态。',
        type: 'error'
      });
    };

    // 关闭连接
    socket.onclose = () => console.log('WebSocket 关闭连接');
  }
};

/**
 * 发送消息
 */
const sendMessage = () => {
  if (newMessage.value.trim() === '') return;
  console.log('发送消息:', selectedUser.value);
  // 构建消息对象
  const message = {
    to: selectedUser.value ? selectedUser.value.id : '', // 目标用户的ID
    from: userId.value, // 发送者的ID
    username: selectedUser.value ? username.value : 'Me',
    content: newMessage.value,
    avatar: selectedUser.value ? selectedUser.value.avatar : '',
    time: new Date()
  };

  // 发送消息到 WebSocket
  if (socket && socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify(message));
  }

  // 添加消息到本地消息列表
  messages.value.push({
    ...message,
    from: 'me' // 显示为“我”
  });

  // 清空输入框
  newMessage.value = '';

  // 滚动到底部
  scrollToBottom();
};

/**
 * 选择用户进行聊天
 */
const selectUser = async (user) => {
  selectedUser.value = user;
  messages.value = []; // 清空之前的聊天记录

  // 在这里添加代码以从服务器加载历史消息

  //await loadHistoryMessages(userId.value);

  initWebSocket(); // 初始化WebSocket连接
};

// 加载历史消息
// const loadHistoryMessages = async (userId) => {
//   try {
//     const response = await axios.get(`http://localhost:8000/user/messages/${userId}/${selectedUser.value.id}`);
//     console.log('历史消息:', response.data);  // 打印返回的数据
//
//     // 将历史消息添加到消息列表中
//     response.data.forEach(msg => {
//       messages.value.push({
//         username: msg.fromUserId === userId.value ? 'Me' : selectedUser.value.username,
//         content: msg.content,
//         avatar: msg.fromUserId === userId.value ? "" : selectedUser.value.avatar,
//         from: msg.fromUserId === userId.value ? 'me' : 'other',
//         time: new Date(msg.time)
//       });
//     });
//
//     scrollToBottom();
//   } catch (error) {
//     console.error('加载历史消息失败:', error);
//     ElNotification({
//       title: '错误',
//       message: '加载历史消息失败，请检查网络连接。',
//       type: 'error'
//     });
//   }
// };

/**
 * 获取用户列表
 */
const fetchUsers = async () => {
  try {
    const response = await axios.get('http://localhost:8000/user/selectOnlineUser');
    console.log('后端返回的用户数据:', response.data);  // 打印返回的数据
    response.data.forEach(user => {
      users.value.push(user);  // 使用push方法更新数组
    });
    console.log('更新后的users:', users.value);
  } catch (error) {
    console.error('获取用户列表失败:', error);
    ElNotification({
      title: '错误',
      message: '获取用户列表失败，请检查网络连接。',
      type: 'error'
    });
  }
};

/**
 * 格式化时间
 */
const formatTime = (time) => {
  // 尝试将输入转换为 Date 对象
  const date = new Date(time);

  // 检查是否创建了一个有效的 Date 对象
  if (isNaN(date.getTime())) {
    // 如果不是有效的时间值，返回默认字符串或其他处理方式
    return ''; // 或者根据需求选择其他处理方式
  }

  const options = { hour: '2-digit', minute: '2-digit' };
  return new Intl.DateTimeFormat('zh-CN', options).format(date);
};

/**
 * 滚动到底部
 */
const scrollToBottom = () => {
  const messageArea = document.querySelector('.message-area');
  if (messageArea) {
    messageArea.scrollTop = messageArea.scrollHeight;
  }
};

/**
 * 关闭 WebSocket 连接
 */
const closeWebSocket = () => {
  if (socket) {
    socket.close();
    socket = null;
  }
};

// 当组件实例被挂载到 DOM 后立即调用，只调用一次
onMounted(() => {
  fetchUsers(); // 页面加载时获取用户列表
});

// 当组件实例从 DOM 中移除后立即调用，只调用一次
onUnmounted(() => {
  closeWebSocket(); // 关闭 WebSocket 连接
});
</script>

<style scoped>
.chat-app {
  display: flex;
  height: 100vh;
}

.user-list {
  background-color: #f0f2f5;
  padding: 16px;
  border-right: 1px solid #e6e6e6;
}

.user-list ul {
  list-style-type: none;
  padding-left: 0;
}

.user-list li {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.user-list li:hover {
  background-color: #e6f7ff;
}

.chat-interface {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.message-area {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
  min-height: 200px; /* 确保即使没有消息时也有一定的高度 */
}

.no-messages {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin-top: 50px;
}

.message {
  margin-bottom: 10px;
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
}

.message.mine {
  align-items: flex-end;
  text-align: right;
}

.message-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-weight: bold;
  margin-right: 5px;
}

.message-time {
  font-size: 0.8em;
  color: #999;
}
.message-content {
  max-width: 70%;
  overflow-wrap: anywhere;
}

.message-content p {
  background-color: #4a86a1;
  padding: 8px 12px;
  border-radius: 4px;
  word-wrap: break-word;
  display: inline-block;
  color: #fff;
  width: 100%;
  text-align: left;
  border-radius: 10px;
}

.message.mine .message-content p {
  background-color: green;
  color: #fff;
}

.input-area {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.send-message {
  flex-grow: 1;
  margin-right: 10px;
}

.user-list li.selected {
  background-color: #d9ecff;  /* 深蓝色背景 */
  font-weight: bold;         /* 加粗字体 */
}
</style>
